import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, hashHistory} from 'react-router';
import 'antd/dist/antd.css'
import {Button} from 'antd'
import PCIndex from './components/pc_index'
import PCNewsDetails from './components/pc_news_detail'
import MobileNewsDetails from './components/mobile_news_detail'
import MobileIndex from './components/mobile_index'
import MediaQuery from 'react-responsive'
import PCUserCenter from './components/pc_usercenter'
import MobileUserCenter from './components/mobile_usercenter'
import PCProduct from './components/pc_product'


export default class Root extends React.Component {
  render() {
    return (
      <div>
        <MediaQuery query='(min-device-width: 1224px)'>
          <Router history={hashHistory}>
            <Route path="/" component={PCIndex}></Route>
            <Route path="/details/:uniquekey" component={PCNewsDetails}></Route>
            <Route path="/PCUserCenter" component={PCUserCenter}></Route>
            <Route path="/PCProduct" component={PCProduct}></Route>
          </Router>
        </MediaQuery>
        <MediaQuery query='(max-device-width: 1224px)'>
           <Router history={hashHistory}>
            <Route path="/" component={MobileIndex}></Route>
            <Route path="/details/:uniquekey" component={MobileNewsDetails}></Route>
            <Route path="/MobileUserCenter" component={MobileUserCenter}></Route>
          </Router>
        </MediaQuery>
      </div>
    )
  }
}

ReactDOM.render(
  <Root/>, document.getElementById('mainContainer'))
